<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>行业动态详情 - 金顾云集团</title>
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="css/nav.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="js/load-nav.js"></script>
    <style>
        .news-detail-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 40px 20px;
        }
        
        .news-detail-header {
            margin-bottom: 30px;
        }
        
        .news-detail-title {
            font-size: 2em;
            font-weight: 700;
            color: #333;
            line-height: 1.4;
            margin-bottom: 20px;
        }
        
        .news-detail-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            color: #666;
            font-size: 0.9em;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid #eee;
        }
        
        .news-detail-meta .meta-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .news-detail-tag {
            background: #f0f8ff;
            color: #1890ff;
            padding: 4px 12px;
            border-radius: 16px;
            font-size: 0.8em;
        }
        
        .news-detail-content {
            line-height: 1.8;
            color: #333;
            font-size: 1.1em;
        }
        
        .news-detail-content p {
            margin-bottom: 20px;
        }
        
        .news-detail-summary {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            margin: 30px 0;
            border-left: 4px solid var(--primary-color);
        }
        
        .news-detail-summary h3 {
            color: var(--primary-color);
            margin-bottom: 15px;
            font-size: 1.2em;
        }
        
        .news-detail-impact {
            background: #fff8f0;
            padding: 20px;
            border-radius: 8px;
            margin: 30px 0;
            border-left: 4px solid #ff9800;
        }
        
        .news-detail-impact h3 {
            color: #ff9800;
            margin-bottom: 15px;
            font-size: 1.2em;
        }
        
        .news-detail-footer {
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px solid #eee;
            text-align: center;
        }
        
        .back-button {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 24px;
            background: var(--primary-color);
            color: white;
            text-decoration: none;
            border-radius: 6px;
            transition: all 0.3s ease;
        }
        
        .back-button:hover {
            background: var(--primary-dark);
            transform: translateY(-2px);
        }
        
        .loading-detail {
            text-align: center;
            padding: 80px 20px;
            color: #666;
        }
        
        .error-detail {
            text-align: center;
            padding: 80px 20px;
            color: #999;
        }
        
        .error-detail .error-icon {
            font-size: 4em;
            margin-bottom: 20px;
            color: #ddd;
        }
        
        /* 新闻详情页面横幅移动端优化 */
        @media (max-width: 768px) {
            .page-banner {
                background-attachment: scroll !important;
            }
            
            .news-detail-container {
                padding: 20px 15px;
            }
            
            .news-detail-title {
                font-size: 1.6em;
            }
            
            .news-detail-meta {
                gap: 15px;
            }
            
            .news-detail-content {
                font-size: 1em;
            }
        }
    </style>
</head>
<body>
    <!-- 导航组件容器 -->
    <div id="nav-container"></div>

    <!-- 页面横幅 -->
    <section class="page-banner" style="background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.3)), url('https://cfcall.oss-cn-shenzhen.aliyuncs.com/20250715/59c8df5f182146e5a7f475d66da3ff15.png') !important; background-size: cover !important; background-position: center !important; background-attachment: fixed !important;">
        <div class="container">
            <div class="banner-content">
                <h1>行业动态详情</h1>
                <p>了解融资租赁行业最新发展动态</p>
            </div>
        </div>
    </section>

    <!-- 新闻详情内容 -->
    <section class="section">
        <div class="news-detail-container">
            <div id="newsDetailContent">
                <!-- 加载中状态 -->
                <div class="loading-detail">
                    <div class="loading-spinner"></div>
                    <p>正在加载详情...</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 简洁底部 -->
    <footer class="footer-simple">
      <div class="footer-main">
        <!-- 公司信息 -->
        <div class="footer-brand" style="flex:1 1 0;">
          <img src="https://cfcyunchat-1314260234.cos.ap-nanjing.myqcloud.com/pc/%E9%87%91%E9%A1%BE%E4%BA%91logo.jpg" alt="金顾云logo" class="footer-logo">
          <div class="footer-tagline">让融资更简单</div>
        </div>
        <!-- 栏目三栏 -->
        <div class="footer-columns" style="flex:1.5 1 0; min-width:260px;">
          <div class="footer-nav-section">
            <h4>融顾服务</h4>
            <a href="finance-outsourcing-center.html">融资外包</a>
            <a href="consultant.html">常顾服务</a>
          </div>
          <div class="footer-nav-section">
            <h4>关于我们</h4>
            <a href="about.html">公司简介</a>
            <a href="club.html">金顾云俱乐部</a>
            <a href="partner.html">合伙人加盟</a>
          </div>
          <div class="footer-nav-section">
            <h4>联系我们</h4>
            <a href="tel:0755-86561203">0755-86561203</a>
            <a href="mailto:service@cfcyun.com">service@cfcyun.com</a>
            
          </div>
        </div>
        <!-- 二维码区域 -->
        <div class="footer-qr" style="flex:3.5 1 0; max-width:900px;">
          <h4>扫码关注</h4>
          <div class="qr-grid">
            <div class="footer-qr-item">
              <img src="https://cfcyunchat-1314260234.cos.ap-nanjing.myqcloud.com/pc/1.jpg" alt="金顾云小程序" class="footer-qr-img">
              <span>金顾云小程序</span>
            </div>
            <div class="footer-qr-item">
              <img src="https://cfcyunchat-1314260234.cos.ap-nanjing.myqcloud.com/pc/2.jpg" alt="金顾云俱乐部小程序" class="footer-qr-img">
              <span>金顾云俱乐部小程序</span>
            </div>
            <div class="footer-qr-item">
              <img src="https://cfcyunchat-1314260234.cos.ap-nanjing.myqcloud.com/pc/3.jpg" alt="金顾云公众号" class="footer-qr-img">
              <span>金顾云公众号</span>
            </div>
            <div class="footer-qr-item">
              <img src="https://cfcyunchat-1314260234.cos.ap-nanjing.myqcloud.com/pc/4.jpg" alt="金顾云俱乐部公众号" class="footer-qr-img">
              <span>金顾云俱乐部公众号</span>
            </div>
            <div class="footer-qr-item">
              <img src="https://cfcyunchat-1314260234.cos.ap-nanjing.myqcloud.com/pc/5.jpg" alt="金顾云公益基金会公众号" class="footer-qr-img">
              <span>金顾云公益基金会公众号</span>
            </div>
            <div class="footer-qr-item">
              <img src="https://cfcyunchat-1314260234.cos.ap-nanjing.myqcloud.com/pc/6.jpg" alt="金顾云视频号" class="footer-qr-img">
              <span>金顾云视频号</span>
            </div>
            <div class="footer-qr-item">
              <img src="https://cfcyunchat-1314260234.cos.ap-nanjing.myqcloud.com/pc/7.jpg" alt="金顾云俱乐部视频号" class="footer-qr-img">
              <span>金顾云俱乐部视频号</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 底部信息 -->
      <div class="footer-bottom">
        <div class="footer-copyright">
          <span>© 2024 金顾云集团 版权所有</span>
                      <a href="https://beian.miit.gov.cn/" target="_blank" style="text-decoration: none;">沪ICP备2022025984号-3</a>
          <span>沪公网安备31010102007667号</span>
        </div>
		<div class="footer-links">
		  <a href="/privacy">隐私政策</a>
		  <a href="/terms">服务条款</a>
		</div>
       
      </div>
    </footer>

    <script>
        // 获取URL参数
        function getUrlParameter(name) {
            const urlParams = new URLSearchParams(window.location.search);
            return urlParams.get(name);
        }

        // 格式化日期
        function formatDetailDate(dateString) {
            const date = new Date(dateString);
            return date.toLocaleDateString('zh-CN', { 
                year: 'numeric',
                month: 'long', 
                day: 'numeric',
                hour: '2-digit',
                minute: '2-digit'
            });
        }

        // 加载新闻详情
        async function loadNewsDetail() {
            const newsId = getUrlParameter('id');
            if (!newsId) {
                showError('未找到新闻ID');
                return;
            }

            try {
                // 获取新闻列表，找到对应的新闻
                const response = await fetch(`https://gateway.cfcyun.com/bbs/ainews/list?newsType=99&pageNum=1&pageSize=100`);
                const data = await response.json();
                
                if (data.code === 200 && data.rows) {
                    const newsItem = data.rows.find(item => item.id == newsId);
                    if (newsItem) {
                        renderNewsDetail(newsItem);
                    } else {
                        showError('未找到该新闻');
                    }
                } else {
                    showError('加载失败');
                }
            } catch (error) {
                console.error('加载新闻详情失败:', error);
                showError('加载失败，请稍后重试');
            }
        }

        // 渲染新闻详情
        function renderNewsDetail(newsItem) {
            const container = document.getElementById('newsDetailContent');
            
            const html = `
                <div class="news-detail-header">
                    <h1 class="news-detail-title">${newsItem.title}</h1>
                    <div class="news-detail-meta">
                        <div class="meta-item">
                            <i class="fas fa-calendar-alt"></i>
                            ${formatDetailDate(newsItem.pubDate)}
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-user"></i>
                            ${newsItem.author || '金顾云'}
                        </div>
                        <div class="news-detail-tag">${newsItem.tag || '行业动态'}</div>
                    </div>
                </div>
                
                <div class="news-detail-content">
                    <p>${newsItem.content}</p>
                    
                    ${newsItem.aisummary ? `
                        <div class="news-detail-summary">
                            <h3><i class="fas fa-lightbulb"></i> AI 摘要</h3>
                            <p>${newsItem.aisummary}</p>
                        </div>
                    ` : ''}
                    
                    ${newsItem.aiyingxiang ? `
                        <div class="news-detail-impact">
                            <h3><i class="fas fa-chart-line"></i> 影响分析</h3>
                            <p>${newsItem.aiyingxiang}</p>
                        </div>
                    ` : ''}
                </div>
                
                <div class="news-detail-footer">
                    <a href="index.html#industry-news" class="back-button">
                        <i class="fas fa-arrow-left"></i>
                        返回首页
                    </a>
                </div>
            `;
            
            container.innerHTML = html;
        }

        // 显示错误信息
        function showError(message) {
            const container = document.getElementById('newsDetailContent');
            container.innerHTML = `
                <div class="error-detail">
                    <div class="error-icon">??</div>
                    <h2>加载失败</h2>
                    <p>${message}</p>
                    <div style="margin-top: 30px;">
                        <a href="index.html" class="back-button">
                            <i class="fas fa-home"></i>
                            返回首页
                        </a>
                    </div>
                </div>
            `;
        }

        // 页面加载时执行
        document.addEventListener('DOMContentLoaded', () => {
            loadNewsDetail();
        });
    </script>

    <style>
    /* 简洁底部样式 */
    .footer-simple {
      background: #f8f9fa;
      border-top: 1px solid #e9ecef;
      margin-top: 60px;
      width: 100%;
    }
    .footer-main {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      width: 100%;
      padding: 48px 40px 32px 40px;
      box-sizing: border-box;
      gap: 32px;
    }
    .footer-brand {
      min-width: 120px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    .footer-logo {
      width: 80px;
      height: auto;
      margin-bottom: 16px;
      border-radius: 6px;
    }
    .footer-tagline {
      color: #6c757d;
      font-size: 1.1em;
      font-weight: 500;
      margin-top: 0;
    }
    .footer-columns {
      display: flex;
      gap: 48px;
      justify-content: center;
      min-width: 260px;
    }
    .footer-nav-section {
      min-width: 120px;
    }
    .footer-nav-section h4 {
      font-size: 1em;
      font-weight: 600;
      color: #343a40;
      margin-bottom: 16px;
      margin-top: 0;
    }
    .footer-nav-section a {
      display: block;
      color: #6c757d;
      text-decoration: none;
      margin-bottom: 8px;
      font-size: 0.9em;
      transition: color 0.2s ease;
    }
    .footer-nav-section a:hover {
      color: #c00;
    }
    .footer-qr {
      min-width: 320px;
      max-width: 900px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .footer-qr h4 {
      font-size: 1.1em;
      font-weight: 600;
      color: #343a40;
      margin-bottom: 16px;
      margin-top: 0;
      text-align: center;
    }
    .qr-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 18px 18px;
      justify-content: flex-start;
      max-width: 900px;
    }
    .footer-qr-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      width: 80px;
    }
    .footer-qr-img {
      width: 60px;
      height: 60px;
      border-radius: 6px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      transition: transform 0.3s ease;
    }
    .footer-qr-img:hover {
      transform: scale(1.05);
    }
    .footer-qr-item span {
      font-size: 0.7em;
      color: #6c757d;
      text-align: center;
      margin-top: 2px;
      line-height: 1.2;
      word-wrap: break-word;
      hyphens: auto;
    }
    .footer-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24px 40px;
      border-top: 1px solid #e9ecef;
      font-size: 0.85em;
      color: #6c757d;
      width: 100%;
      box-sizing: border-box;
    }
    .footer-copyright {
      display: flex;
      gap: 24px;
    }
    .footer-links {
      display: flex;
      gap: 24px;
    }
    .footer-links a {
      color: #6c757d;
      text-decoration: none;
      transition: color 0.2s ease;
    }
    .footer-links a:hover {
      color: #c00;
    }
    @media (max-width:1024px) {
      .footer-main {
        flex-wrap: wrap;
        gap: 24px;
        padding: 32px 16px 24px 16px;
      }
      .footer-columns {
        gap: 24px;
      }
      .footer-qr {
        min-width: 220px;
        max-width: 100%;
      }
      .qr-grid {
        gap: 12px 12px;
        max-width: 100%;
      }
    }
    @media (max-width: 900px) {
      .footer-main {
        flex-direction: column;
        gap: 24px;
        padding: 20px 8px;
      }
      .footer-columns {
        flex-direction: column;
        gap: 8px;
        min-width: 0;
      }
      .footer-qr {
        align-items: flex-start;
        min-width: 0;
      }
      .qr-grid {
        justify-content: flex-start;
      }
    }
    @media (max-width: 700px) {
      .footer-main {
        gap: 12px;
        padding: 10px 2px;
      }
      .footer-bottom {
        flex-direction: column;
        gap: 8px;
        padding: 8px;
      }
    }
    </style>
    <script src="js/main.js"></script>
</body>
</html> 